<template>
  <div class="TES">
    <div class="center">
      <div class="head">
        <div class="wrap" @click="curId = 0" :class="{ cur: curId === 0 }">
          <div class="wrap_right_bottom" :class="{ cur: curId === 0 }"></div>
          <div class="let_top center">
            <p class="right">1</p>
            <dl class="dl dl1">
              <dt><img src="../assets/teach.png" /></dt>
              <dd>教师功底</dd>
            </dl>
          </div>
          <div class="img"><img src="../assets/teacher1.gif" /></div>
        </div>
        <div class="wrap" @click="curId = 1" :class="{ cur: curId === 1 }">
          <div class="wrap_left_bottom" :class="{ cur: curId === 1 }"></div>
          <div class="let_top center">
            <p class="left">2</p>
            <dl class="dl dl1">
              <dd>贡献参与度</dd>
              <dt><img src="../assets/teach2.png" /></dt>
            </dl>
          </div>
        </div>
        <div class="wrap" @click="curId = 2" :class="{ cur: curId === 2 }">
          <div class="wrap_right_top" :class="{ cur: curId === 2 }"></div>
          <div class="let_top center">
            <dl class="dl dld">
              <dt><img src="../assets/teach1.png" /></dt>
              <dd>客户满意度</dd>
            </dl>
            <p class="right">3</p>
          </div>
        </div>
        <div class="wrap" @click="curId = 3" :class="{ cur: curId === 3 }">
          <div class="wrap_left_top" :class="{ cur: curId === 3 }"></div>
          <div class="let_top center">
            <dl class="dl dld">
              <dd>教师荣誉</dd>
              <dt><img src="../assets/teach3.png" /></dt>
            </dl>
            <p class="left">4</p>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="main1" v-show="curId === 0"><Teach /></div>
        <div class="main2" v-show="curId === 1"><Contribution /></div>
        <div class="main3" v-show="curId === 2"><Satisfied /></div>
        <div class="main4" v-show="curId === 3"><Honor /></div>
      </div>
    </div>
  </div>
</template>
<script>
import Teach from "../components/teach.vue";
import Contribution from "../components/contribution.vue";
import Satisfied from "../components/satisfied.vue";
import Honor from "../components/honor.vue";
import axios from "axios";
export default {
  name: "Index",
  components: {
    Teach,
    Contribution,
    Satisfied,
    Honor,
  },
  data() {
    return {
      curId: 0,
    };
  },

  created() {
    let id = this.$route.query.id;
    this.curId = id - 1;

    axios
      .get("/system/teacher", {
        // id:localStorage.getItem("ids")
      })
      .then(function (res) {
        console.log(res);
      })
      .catch(function (err) {
        console.log(err);
      });
  },
};
</script>
<style scoped>
.center {
  width: 90%;
  margin: 0 auto;
}
.head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}

.wrap {
  color: #666666;
  width: 48%;
  margin: 0.3rem 0;
  position: relative;
  border-top: 1px solid #eee;
  box-shadow: 1px 2px 1px 1px #eee;
  border-left: 1px solid #eee;
}
.wrap_right_bottom,
.wrap_left_bottom,
.wrap_right_top,
.wrap_left_top {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 1;
  background: #fff;
}
.wrap_right_bottom {
  bottom: -1px;
  right: -1px;
  border-radius: 50px 0 0 0;
  box-shadow: 0px 0px 1px 1px #eee;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
}
.wrap_left_bottom {
  bottom: -1px;
  left: -1px;
  border-radius: 0 50px 0 0;
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  box-shadow: 0px 0px 1px 1px #eee;
}
.wrap_right_top {
  top: -1px;
  right: -1px;
  border-radius: 0 0 0 50px;
  border-bottom: 1px solid #eee;
  border-left: 1px solid #eee;
  box-shadow: 0px 0px 1px 1px #eee;
}
.wrap_left_top {
  top: -1px;
  left: -1px;
  border-radius: 0 0 50px 0;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  box-shadow: 0px 0px 1px 1px #eee;
}
.img {
  width: 106px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  right: -3.7rem;
  bottom: -53px;
  z-index: 5;
}
.img img {
  width: 100%;
  border-radius: 50%;
}
.right {
  text-align: right;
}

.dl {
  display: flex;
  justify-content: space-around;
}
.dl dt {
  width: 50px;
  height: 50px;
}
.dl dd {
  margin: 0.5rem auto;
}
.dl1 dd{margin-bottom: 3.5rem;}
.dl dt img {
  width: 100%;
}
.dld {
  margin-top: 2.4rem;
}
.main {
  margin: 0.5rem auto;
}
.main1,
.main2,
.main3,
.main4 {
  width: 100%;
  box-shadow: 1px 4px 2px 5px #eee;
  border-radius: 15px;
}
h3 {
  text-align: center;
  color: #d62c32;
  font-weight: 500;
  line-height: 2.5rem;
}
.cur {
  border: 1px solid #f00;
  color: #d62c32;
}
</style>
